<html> 
<head> 
<script type="text/javascript"> 
var canvas;
var g;
var rate = 5;
var mouseX = 0;
var mouseY = 0; 
var pmouseX = 0;
var pmouseY = 0;
var width, height;
var mousePressed = false;
 
var hexes = [];
 
function setup() {
  canvas = document.createElement("canvas");
  document.body.appendChild(canvas);
  g = canvas.getContext("2d");
  setInterval(draw, rate);    
  document.addEventListener('mousemove', onDocumentMouseMove, false);
  document.addEventListener('mousedown', onDocumentMouseDown, false);
  document.addEventListener('mouseup', onDocumentMouseUp, false); 
  window.addEventListener('resize', onWindowResize, false);
  onWindowResize();
  //////////////////////////////////////////
  while (hexes.length < 200) {
    hexes.push(new Hex());
  }
}
function onWindowResize(e) {
  width = canvas.width = window.innerWidth;
  height = canvas.height = window.innerHeight;
}
function onDocumentMouseMove(e) {
  pmouseX = mouseX;
  pmouseY = mouseY;
  mouseX = e.pageX;
  mouseY = e.pageY;
}
function onDocumentMouseDown(e) { 
  mousePressed = true;
}
function onDocumentMouseUp(e) { 
  mousePressed = false;
}
 
function dist(x, y, xx, yy) {
  return Math.sqrt((xx-x)*(xx-x)+(yy-y)*(yy-y));
}
 
function constrain(v, min, max){
  if(v<min) v = min;
  if(v>max) v = max;
  return v;
}
 
function map(v, i1, i2, o1, o2) {
  return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
}
 
function random(a, b) {
  var r = Math.random();
  if (a instanceof Array) {
    var i = Math.floor(r*a.length);
    return a[i];
  } else if (b == undefined) {
    return r*a;
  } else { 
    return r*(a+b)-a;
  }
}
var cx = -200;
function draw() {
  g.globalCompositeOperation = "source-over"; 
  g.fillStyle= "#000";
  g.fillRect(0, 0, width, height);
  g.globalCompositeOperation = "lighter"; 
  for (var h in hexes) {
    hexes[h].update();
    hexes[h].draw();
  }
  cx += 8;
  if (cx > width+200) {
    cx = -200;
  }
}
 
function roundedHex(x,y, d) {
  var sides = 6;
  var a = Math.PI*2/sides;
  var aa = a;
  var r = 10;
  g.beginPath();
  g.save();
  g.translate(x, y);
  g.moveTo(Math.cos(aa)*d, Math.sin(aa)*d);
  for (var i = 0; i < sides; i++) {
    aa += a;
    g.lineTo(Math.cos(aa)*d, Math.sin(aa)*d);
  }
  g.fill();
  g.restore();
  g.closePath();
}
 
var colors = ["#e4463b", "#fffc23", "#5ad81c", "#1c8bd8"];
var s = 80;
var rows = 20;
var cols = 10;
function Hex() {
  this.x = (hexes.length%rows)*s;
  this.y = Math.floor(hexes.length/rows)*s*0.865;
  this.color = random(colors);
  this.ss = 0;
  this.draw = function() {
    var radgrad2 = g.createRadialGradient(0,0,0,0,0,this.ss*1.5);//g.createRadialGradient(this.x,this.y,0,this.x,this.y,this.s);
    radgrad2.addColorStop(0, this.color);
    radgrad2.addColorStop(1, "#000");
    g.fillStyle = radgrad2;
    if (this.ss > 0) {
    roundedHex(this.x, this.y, this.ss);
    }
  }
  
  this.update = function() {
    var d = dist(cx, height/2.3, this.x, this.y);
    d = constrain(d, 0, 200);
    var x = map(d, 200, 0, 0, s*2);
    this.ss += (x-this.ss)*0.5;
  }
  
}
</script> 
<style type="text/css"> 
* { 
margin: 0;
padding: 0;
}
html, body { 
width: 100%;
background-color: #000;
height: 100%;
}
img { 
position: absolute;
  left: 50%;
  margin-left: -90px;
  padding-top: 470px;
}
</style> 
</head> 
<body onload="setup()"> 
<img src="title.png" alt="" width="180"/> 
</body> 
</html>